<template lang="html">
  <div class="pingtuan">


    <MaskRules ref="MaskRules" content="3333" />

    <div class="btn-rules" @click="MaskRulesEvent">
      拼团规则
    </div>
    <div class="banner">
      <img class="max" src="/static/pingtuan/spell_banner@2x.png">
    </div>
    <div class="pt-title">
      <img class="max" src="/static/pingtuan/spell_title_enjoy@2x.png">
    </div>
    <div class="pt-list">
      <ul>
        <li class="pt-item" v-for="(item, idx) in list">
          <div class="item-left">
            <div class="icon">
              <img class="max" src="/static/pingtuan/spell_label_hot@2x.png">
            </div>
            <div class="pic">
              <img class="max" :src="item.ptgoods_thumb">
            </div>
            <div class="dates" v-if="item.is_start_end">
              <div class="date-text">
                距离结束还剩
              </div>
              <div class="date-nums date-nums-list">
                <countdown :time="new Date(item.end_time) - new Date()">
                  <template slot-scope="props">
                    <div v-html="CountdownTime(props)"></div>
                  </template>
                </countdown>
              </div>
            </div>
            <div class="dates" v-else>
              <div class="date-text">
                距离开始还剩
              </div>
              <div class="date-nums date-nums-list">
                <countdown :time="new Date(item.start_time) - new Date()">
                  <template slot-scope="props">
                    <div v-html="CountdownTime(props)"></div>
                  </template>
                </countdown>
              </div>
            </div>
          </div>
          <div class="item-right">
            <div class="title">
              {{ item.ptgoods_name }}
            </div>
            <div class="describe">
              {{ item.description }}
            </div>
            <div class="nums">
              {{ item.pt_size }}人团 | 已拼{{ item.pt_times }}团 | 库存：{{ item.pt_goods_number }}
            </div>
            <div class="info">
              <div class="prices">
                <div class="present-price">
                  <span>拼团价</span>￥{{ item.pt_price }}
                </div>
                <div class="purchase-price">
                  原价：¥ <span>{{ item.price }}</span>
                </div>
              </div>
              <div class="btn-join">
                <img class="max" @click="routeTo('/pingtuan/goods?goodsId='+item.id)" v-if="item.is_start_end" src="/static/pingtuan/spell_but_tuxedo@2x.png">
                <img class="max" v-else src="/static/pingtuan/spell_but_tuxedo_dis@2x.png">
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import { ptGoodsInfo } from '@/api/pingtuan'
import MaskRules from './components/MaskRules'
export default {
  components: {
    MaskRules,
  },
  data() {
    return {
      showRules: false,
      list: null,
    }
  },
  created() {
    this.ptGoodsInfo();
  },
  methods: {
    ptGoodsInfo() {
      ptGoodsInfo().then(res=>{
        this.list = res.data;
        this.print(this.list)
      })
    },
    // 显示拼团规则弹框
    MaskRulesEvent() {
      this.$refs.MaskRules.MaskRulesEvent()
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/pingtuan/common.scss';
</style>

<style lang="scss" scoped>
$MainColor: #FF4858;


.pingtuan{
  margin: 0 auto;
  max-width: 750px;
  position: relative;
  background-color: $MainColor;
  .btn-rules{
    position: absolute;
    right: 0;
    top: .3rem;
    background: -webkit-linear-gradient(#FEDC30, #FE8A3C);
    background: linear-gradient(#FEDC30, #FE8A3C);
    color: #fff;
    padding: .14rem .2rem;
    border-radius: .5rem 0 0 .5rem;
    padding-left: .3rem;
  }
  .banner{
    padding-top: .8rem;
  }
  .pt-title{
    width: 72%;
    margin: 0 auto;
    margin-top: -1.3rem;
  }
  .pt-list{
    margin-top: .5rem;
    padding-bottom: .6rem;
  }
  .pt-item{
    background-color: #fff;
    border-radius: .15rem;
    margin: .3rem;
    overflow: hidden;
    margin-top: 0;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    padding: .35rem;
    padding-top: .7rem;
    position: relative;
    .item-left{
      float: left;
      width: 2.4rem;
      .icon{
        width: 1.3rem;
        position: absolute;
        z-index: 2;
        top: .3rem;
        left: .2rem;
      }
      .pic{
        width: 2.4rem;
        height: 2.4rem;
        text-align: center;
      }
    }
    .item-right{
      float: left;
      width: 6rem;
      margin-left: .3rem;
      .title{
        font-weight: bold;
        color: #191919;
        font-size: .4rem;
      }
      .describe{
        font-size: .32rem;
        color: #666;
        margin-top: .1rem;
        margin-bottom: .1rem;
      }
      .nums{
        color: #888;
        font-size: .32rem;
      }
      .btn-join{
        width: 2rem;
        float: right;
        padding-top: .1rem;
      }
      .info{
        margin-top: .2rem;
        .prices{
          float: left;
          .purchase-price{
            color: #A09A9B;
            font-size: .3rem;
            span{
              text-decoration: line-through;
            }
          }
          .present-price{
            color: $MainColor;
            font-size: .48rem;
            span{
              color: #333;
              font-size: .34rem;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
